<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      /* 
             根据函数调用方式的不同,this的值也不同
                1. 以函数形式调用,this是window
                2. 以方法形式调用,this是调用方法的对象
                3. 构造函数中,this是新建的对象
                4. 箭头函数没有自己的this,由外部作用域决定
                5. 通过call和apply调用的函数,它们的第一个参数就是函数的this
                6. 通过bind返回的函数,this由bind的第一个参数决定(无法修改)       
        */
      /* 
            bind()是函数的方法,可以用来创建一个新的函数,高阶函数,以函数为返回值(作用为在不修改原函数的情况下,扩展其作用)
                - bind可以为新函数绑定this
                - bind可以为新函数绑定参数

            箭头函数没有自身的this,它的this由外层作用域决定,
                也无法通过call apply 和bind来修改它的this
                箭头函数中没有arguments
         */

      function fn(a, b, c) {
        console.log(this);
        console.log(a, b, c);
      }
      const obj = {};
      //  无法修改,绑定死了
      let result;
      result = fn.bind(obj, 1, 2, 3);
      console.log(result());

      const newfn = () => {
        console.log(this);
      };
      result = newfn.bind();
      console.log(result());
      class Person{
        fn = () => {
            console.log(this);
        }
      }
      const newfn1 = new Person()
      newfn1.fn.bind(obj)
      newfn1.fn()
    </script>
  </head>
  <body></body>
</html>
